<template>
  <div id="app">
    <Topbar :key="topBar"></Topbar>
    <Header></Header>
    <router-view @upstateKey="upstateKeyFn"/>
    <Footer></Footer>
    <!-- 登录 -->
    <Login v-show="isShowModal"></Login>
    <!-- 提示框组件 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar.vue"
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
import Login from "@/components/Login.vue"
import Toast from "@/components/Toast.vue"
import {JingpinAPI,ReMenAPI} from "@/request/api.js"
import {mapState} from 'vuex'
export default {
  data(){
    return{
      topBar:0
    }
  },
  methods:{
    upstateKeyFn(){
      console.log('upstateKeyFn进来了');
      this.topBar++
    }
  },
  //监听路由变化 设置一个key值 只要key发生变化 组件就会重新加载 组件重载二
  watch:{
    '$route.path':{
      handler(newVal,oldVal){
        if(newVal!==oldVal){
          this.topBar++
        }
      }
    }
  },
  computed:{
      ...mapState({
        isShowModal:stae => stae.showModal.isShowModal,
        isShowToast:state => state.showToast.isShowToast
      })
    },
  components:{
    Topbar,
    Header,
    Footer,
    Login,
    Toast
  },
 async created(){
   console.log("环境变量值：",process.env.VUE_APP_BASE_URL);
    console.log("环境变量值：",process.env.VUE_APP_STATE_URL);
  //   axios.get("/products/recommend").then(res=>{
  //     console.log(res);
  //   })
  // JingpinAPI().then(res=>{
  //   console.log(res);
  // }),
  //  ReMenAPI().then(res=>{
  //    console.log(res);
  //  })
  // 异步转同步
  let res1 = await JingpinAPI()
  // console.log("res1",res1);

  let res2 = await ReMenAPI()
  // console.log("res2",res2);
  }
}
</script>
<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
